<!--
 * @Author: byron
 * @Date: 2022-01-13 16:38:38
 * @LastEditTime: 2022-02-09 14:04:52
-->
<template>
    <transition name="fade-bar">
        <div
            class="toolbar"
            v-show="btnFlag"
            :class="{ toolbarShow: barVisible }"
        >
            <div class="bars bars-active" @click="showbar">
                <i class="iconfont icon-ellipsis-h"></i>
            </div>
            <span class="mode mode-show" @click="backTop">
                <i class="iconfont icon-up1"></i>
            </span>
            <span class="skin skin-show" @click="updateTheme">
                <i class="iconfont icon-adjust"></i>
            </span>
            <span class="setting setting-show" @click="showpopup">
                <i class="iconfont icon-setting-fill"></i>
            </span>
            <transition name="popup">
                <div class="skin-popup" v-show="popupVisible">
                    <span class="closeBtn" @click="closePopup">
                        <Icon type=""></Icon>
                    </span>
                    <div class="item">
                        <div class="title">主题色彩</div>
                        <div class="themes">
                            <button
                                style="background: #2d8cf0"
                                @click="updateColor('#2d8cf0')"
                            ></button>
                            <button
                                style="background: #fa7298"
                                @click="updateColor('#fa7298')"
                            ></button>
                            <button
                                style="background: #42b983"
                                @click="updateColor('#42b983')"
                            ></button>
                            <button
                                style="background: #906f61"
                                @click="updateColor('#906f61')"
                            ></button>
                            <button
                                style="background: #5e72e4"
                                @click="updateColor('#5e72e4')"
                            ></button>
                            <button
                                style="background: #ff9700"
                                @click="updateColor('#ff9700')"
                            ></button>
                            <button
                                style="background: #ff5722"
                                @click="updateColor('#ff5722')"
                            ></button>
                            <button
                                style="background: #009688"
                                @click="updateColor('#009688')"
                            ></button>
                            <button
                                style="background: #673bb7"
                                @click="updateColor('#673bb7')"
                            ></button>
                            <button
                                style="background: #607d8b"
                                @click="updateColor('#607d8b')"
                            ></button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">页面布局</div>
                        <div class="layout">
                            <div class="switch-groud">
                                <el-switch
                                    v-model="auth"
                                    active-text="个人信息"
                                >
                                </el-switch>
                                <el-switch v-model="app" active-text="其它App">
                                </el-switch>
                            </div>
                            <div class="switch-groud">
                                <el-switch v-model="tag" active-text="所有标签">
                                </el-switch>
                                <el-switch v-model="toc" active-text="文章目录">
                                </el-switch>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            popupVisible: false,
            barVisible: false,
            btnFlag: false,
        }
    },
    watch: {
        barVisible() {
            if (this.popupVisible) {
                this.popupVisible = 0
            }
        },
    },
    computed: {
        auth: {
            get() {
                return this.$store.getters.auth
            },
            set() {
                this.$store.commit('app/TOGGLE_AUTH')
            },
        },
        tag: {
            get() {
                return this.$store.getters.tags
            },
            set() {
                this.$store.commit('app/TOGGLE_TAGS')
            },
        },
        app: {
            get() {
                return this.$store.getters.otherApp
            },
            set() {
                this.$store.commit('app/TOGGLE_OTHERAPP')
            },
        },
        toc: {
            get() {
                return this.$store.getters.toc
            },
            set() {
                this.$store.commit('app/TOGGLE_TOC')
            },
        },
    },
    methods: {
        updateColor(color) {
            window.less.modifyVars({
                '@primary-color': color,
                '@link-color': color,
                '@btn-primary-bg': color,
            })
            this.$store.commit('app/UPDATE_COLOR', color)
            this.$message({
                message: '切换配色成功',
                type: 'success',
            })
        },

        closePopup() {
            this.popupVisible = false
            this.barVisible = false
        },
        updateTheme() {
            this.$message('尚未开发')
            // this.$store.commit('app/UPDATE_THEME', 'theme-night')
        },
        showpopup() {
            this.popupVisible = !this.popupVisible
        },
        showbar() {
            this.barVisible = !this.barVisible
        },

        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop() {
            const that = this
            console.log(this)
            console.log(that.scrollTop)
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 8)
                console.log('sp', ispeed)
                console.log('spss', that.scrollTop)
                document.documentElement.scrollTop = document.body.scrollTop =
                    that.scrollTop + ispeed
                if (that.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 16)
            this.barVisible = false
        },

        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop() {
            const that = this
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
            that.scrollTop = scrollTop
            if (that.scrollTop > 60 || that.popupVisible == true) {
                that.btnFlag = true
            } else {
                that.btnFlag = false
            }
        },
    },
    //初始化页面之后，再对dom节点进行相关操作
    mounted() {
        window.addEventListener('scroll', this.scrollToTop)
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop)
    },
}
</script>
<style lang="less" scoped>
.toolbar {
    .bars {
        width: 45px;
        height: 45px;
        cursor: pointer;
        text-align: center;
        line-height: 46px;
        border-radius: 50%;
        color: #fff;
        background-color: var(--default);
        box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        i {
            font-size: 24px;
        }
    }
    .mode,
    .skin,
    .setting {
        position: absolute;
        cursor: pointer;
        bottom: 0;
        right: 0;
        height: 35px;
        width: 35px;
        text-align: center;
        line-height: 35px;
        z-index: -1;
        opacity: 0;
        border-radius: 4px;
        box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
        background-color: #f8f8f8;
        transition: all 0.3s ease;
    }
    .skin-popup {
        display: block;
        position: fixed;
        left: calc(50% - 190px);
        bottom: 0;
        padding: 25px;
        opacity: 1;
        width: 380px;
        height: auto;
        border-radius: 15px 15px 0 0;
        background-clip: border-box;
        box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
        background-color: #f8f8f8;
        z-index: 10;
        transition: transform 1s;
        .closeBtn {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .item {
            text-align: center;
            .themes button {
                font-size: 1em;
                position: relative;
                width: calc(1.75em - 5px);
                height: calc(1.75em - 5px);
                border-radius: 0.15em;
                cursor: pointer;
                margin: 2.5px;
                flex-shrink: 0;
                justify-self: center;
                transition: all 0.15s;
                overflow: hidden;
                background: transparent;
                z-index: 1;
                box-sizing: border-box;
                outline: none;
                border: none;
            }
            .layout {
                display: flex;
                justify-content: center;
                align-items: center;

                .el-switch {
                    padding: 20px 0 !important;
                }
            }
        }
        .item:not(:last-child) {
            margin: 20px;
        }
        .title {
            font-size: 17px;
            margin-bottom: 10px;
        }
    }
}

// 显示时候的样式
.toolbarShow {
    .setting-show {
        transform: translate3d(-200%, 0, 0);
        opacity: 1;
    }
    .skin-show {
        transform: translate3d(-140%, -140%, 0);
        opacity: 1;
    }
    .mode-show {
        transform: translate3d(0, -200%, 0);
        opacity: 1;
    }
    .bars-active {
        transform: rotate(270deg);
    }
}
// 弹出框动画
.popup-leave {
    opacity: 1;
}

.popup-leave-to {
    transform: translateY(100%);
    opacity: 0;
}

.popup-enter {
    transform: translateY(100%);
    opacity: 0;
}

.popup-enter-to {
    opacity: 1;
}

.popup-enter-active {
    transition: all 0.6s;
}

.popup-leave-active {
    transition: all 0.6s;
}
// 工具栏动画效果
.fade-bar-leave {
    opacity: 1;
}

.fade-bar-leave-to {
    transform: translateY(100%);
    opacity: 0;
}

.fade-bar-enter {
    transform: translateY(100%);
    opacity: 0;
}

.fade-bar-enter-to {
    opacity: 1;
}

.fade-bar-enter-active {
    transition: all 0.6s;
}

.fade-bar-leave-active {
    transition: all 0.6s;
}
</style>
